<script src="js/common.js?v=70"></script>
<div ng-controller="sysTopCtl">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div ng-include="'views/Template/simpleTool.html'"></div>
        <div>
            <div class="gBqKoW">
                <div class="FnqzS" id="leftcb" style="background: white;">
                    <div class="celaRy">
                        <table class="table table-hover" datatable="ed"
                               dt-column-defs="dtColumnDefs" dt-columns="dtColumns"
                               dt-instance="dtInstance" dt-options="dtOptions">
                        </table>
                    </div>
                </div>
                <div class="TNqaS" id="flagcb">
					<span class="cmRdnZ"> <i class="fa fa-angle-double-left"
                                             id="flagcb2"
                                             style="position: absolute; right: 4px; top: 34%;"></i>
					</span>
                </div>
                <div class="jexhMp" style="" >



                    <div style="background-color:black" id="mountNode"></div>




                </div>
            </div>
        </div>
    </div>
</div>


<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>

<script>
    var data = {
        isRoot: true,
        id: 'Root',
        style: {
            fill: 'red'
        },
        children: [{
            id: 'SubTreeNode1',
            raw: {},
            children: [{
                id: 'SubTreeNode1.1'
            }, {
                id: 'SubTreeNode1.2',
                children: [{
                    id: 'SubTreeNode1.2.1'
                }, {
                    id: 'SubTreeNode1.2.2'
                }, {
                    id: 'SubTreeNode1.2.3'
                }]
            }]
        }, {
            id: 'SubTreeNode2',
            children: [{
                id: 'SubTreeNode2.1'
            }]
        }, {
            id: 'SubTreeNode3',
            children: [{
                id: 'SubTreeNode3.1'
            }, {
                id: 'SubTreeNode3.2'
            }, {
                id: 'SubTreeNode3.3'
            }]
        }, {
            id: 'SubTreeNode4'
        }, {
            id: 'SubTreeNode5'
        }, {
            id: 'SubTreeNode6'
        }, {
            id: 'SubTreeNode7'
        }, {
            id: 'SubTreeNode8'
        }, {
            id: 'SubTreeNode9'
        }, {
            id: 'SubTreeNode10'
        }, {
            id: 'SubTreeNode11'
        }]
    };
    console.log(111111);
    var graph = new G6.TreeGraph({
        container: 'mountNode',
        width: 500,
        height: 2048,
        pixelRatio: 2,
        linkCenter: true,
        modes: {
            default: [{
                type: 'collapse-expand',
                onChange: function onChange(item, collapsed) {
                    var data = item.get('model').data;
                    data.collapsed = collapsed;
                    return true;
                }
            }, 'drag-canvas', 'zoom-canvas']
        },
        defaultNode: {
            size: 100,
            style: {
                fill: '#40a9ff',
                stroke: '#096dd9'
            }
        },
        defaultEdge: {
            style: {
                stroke: '#A3B1BF'
            }
        },
        layout: {
            type: 'compactBox',
            direction: 'LR',
            getId: function getId(d) {
                return d.id;
            },
            getHeight: function getHeight() {
                return 16;
            },
            getWidth: function getWidth() {
                return 16;
            },
            getVGap: function getVGap() {
                return 50;
            },
            getHGap: function getHGap() {
                return 100;
            }
        }
    });

    graph.node(function(node) {
        return {
            size: 16,
            anchorPoints: [[0, 0.5], [1, 0.5]],
            style: {
                fill: '#40a9ff',
                stroke: '#096dd9'
            },
            label: node.id,
            labelCfg: {
                position: node.children && node.children.length > 0 ? 'left' : 'right'
            }
        };
    });
    var i = 0;
    graph.edge(function() {
        i++;
        return {
            shape: 'cubic-horizontal',
            color: '#A3B1BF',
            label: i
        };
    });

    graph.data(data);
    graph.render();
    graph.fitView();
</script>




